import React, {useState} from "react";
import {Avatar, Flex, FloatButton, Spin, Tabs, TabsProps} from "antd";
import './index.scss'
import loginLeftBackground from '@/assets/images/login-left.png'
import {useDispatch, useSelector} from "react-redux";
import {StateType} from "@/store";
import LoginForm from "@/views/Login/LoginForm.tsx";
import RegisterForm from "@/views/Login/RegisterForm.tsx";
import IconFont from "@/components/IconFont";
import {IconEnum} from "@/utils/IconEnum.ts";
import {useTranslation} from "react-i18next";
import {changLang} from "@/store/LayoutConfigSlice.ts";


const Login: React.FC = () => {

  const [loading, setLoading] = useState<boolean>(false);

  const layoutConfig = useSelector((state: StateType) => state.pr.layoutConfig)
  const {title, logoSrc} = layoutConfig

  const {i18n, t} = useTranslation();
  const dispatch = useDispatch()
  const lang = useSelector((state: StateType) => state.pr.layoutConfig.lang)

  //切换语言
  const hdChangeLang = () => {
    if (lang === 'en') {
      i18n.changeLanguage("zh")
      dispatch(changLang("zh"))
    } else {
      i18n.changeLanguage("en")
      dispatch(changLang("en"))
    }
  }
  const updateLoading = (value: boolean) => {
    setLoading(value)
  }

  const items: TabsProps['items'] = [
    {
      key: 'login',
      label: t('login.login'),
      children: <LoginForm updateLoading={updateLoading}/>,
    },
    {
      key: 'register',
      label: t('login.register'),
      children: <RegisterForm/>,
    },
  ];

  return (
    <div>
      <Spin spinning={loading} tip="正在登录..." size="large">
        <Flex justify="center" align="center" style={{height: "100vh", width: "100vw",}}>

          <Flex className="login-box">
            <Flex className="login-box-left" justify="center" align="center">
              <img src={loginLeftBackground} alt=""/>
            </Flex>
            <Flex className="login-box-right" vertical align="center">
              <Avatar className="login-box-right-logo" size={48} src={logoSrc}/>
              <h1 className="login-box-right-title">{title}</h1>
              <Tabs style={{width: '100%'}} centered defaultActiveKey="login" items={items}/>
            </Flex>
          </Flex>
          <FloatButton onClick={hdChangeLang} icon={<IconFont icon={IconEnum.LANGUAGE}/>}/>
        </Flex>
        <div className="login-footer">Jvyou Admin ©2023 Created by Jvyou</div>
      </Spin>
    </div>
  )
}

export default Login